<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas实例1-时钟</title>
</head>

<body>
<canvas id="clock" width="500" height="500">
浏览器不支持HTML5
</canvas>
<script src="clock.js"></script>
<script>
    var canvas = document.getElementById('clock');
    var cxt = canvas.getContext('2d'); 
	var clock = new Clock(500,500);
	var image = new Image();  
    // 绑定 load 事件处理器，加载完成后执行  
    image.onload = function(){	
        // 获取 canvas DOM 对象         
	    image.width = 400;
        image.height = 500;
		
        // 将图像绘制到canvas上  
        cxt.drawImage(image, 0, 0, image.width, image.height);  
        // !!! 注意，image 没有加入到 dom之中  		
    };  
	
    // 设置src属性，浏览器会自动加载。  
    // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。  
    image.src = "clock_v1.png";
    setInterval( "drawDetail(cxt)",1000);

    function drawDetail(cxt){
        cxt.clearRect(0,0,canvas.width,canvas.height);	    
	    var d = new Date();
		var min = d.getMinutes();
  	    var hour = d.getHours();
        var second = d.getSeconds();
		clock.setSeconds(second);
		clock.setMinutes(min);
		clock.setHours(hour);
		
		//draw background of clock
		cxt.drawImage(image,0,0,image.width,image.height);
		console.log("image width is:"+image.width+",image height is:"+image.height+" .");
        clock.drawSeconds(cxt,second,min,hour);		
		//clock.drawSeconds(cxt,30,0,hour);
	}
	
</script>


</body>
</html>